<template>
<div class="com-left-line pr fc">
  <div class="corner lt"></div>
  <div class="corner rt"></div>
  <div class="corner rb"></div>
  <div class="corner lb"></div>
  <div class="title fajc">{{label}}</div>
  <div class="chart f1" ref="chart"></div>
</div>
</template>

<script>
import echarts from 'echarts'

export default {
  name: 'com-left-line',
  props: ['chartData', 'label', 'symbol', 'lineColor', 'areaColor'],
  data () {
    return {
      chart: null
    }
  },
  methods: {
    setOption () {
      const data = this.chartData.filter((v, i) => i < 7)

      this.chart.setOption({
        textStyle: {
          fontFamily: 'PingFangSC-Regular'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
            lineStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(255, 255, 255, 0)' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: 'rgba(255, 255, 255, 1)' // 100% 处的颜色
                }]
              },
              width: 2
            }
          },
          padding: 10,
          borderRadius: 8,
          textStyle: {
            fontSize: 28
          },
          formatter ([params]) {
            const date = params.axisValueLabel.split('/')
            return `${date[0]}月${date[1]}日<br>${params.value}`
          }
        },
        grid: {
          left: '40px',
          right: '50px',
          top: '50px',
          bottom: '16px',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: 'rgba(255, 255, 255, .1)',
              width: 3
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#8AA6DB',
            fontSize: 28,
            margin: 6
          },
          data: data.map(v => v.date)
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: ['rgba(255, 255, 255, .1)'],
              width: 3
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#8AA6DB',
            fontSize: 28,
            margin: 28
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255, 255, 255, .1)',
              width: 3
            }
          }
        },
        series: [
          {
            name: '每日康复人员',
            type: 'line',
            showSymbol: false,
            symbol: this.symbol,
            symbolSize: 32,
            smooth: true,
            lineStyle: {
              color: this.lineColor,
              width: 6
            },
            areaStyle: {
              color: this.areaColor
            },
            data: data.map(v => v.count)
          }
        ]
      })
    }
  },
  mounted () {
    this.chart = echarts.init(this.$refs.chart)
    this.setOption()
  },
  watch: {
    chartData () {
      this.setOption()
    }
  }
}
</script>

<style lang="less">
.com-left-line {background-color: rgba(16, 38, 38, 0.7);
  .corner {position: absolute;width: 20px;height: 20px;border: 2px solid #1AFFF8;
    &.lt {border-right: 0;border-bottom: 0;left: 0;top: 0;}
    &.rt {border-left: 0;border-bottom: 0;right: 0;top: 0;}
    &.rb {border-left: 0;border-top: 0;right: 0;bottom: 0;}
    &.lb {border-right: 0;border-top: 0;left: 0;bottom: 0;}
  }
  .title {width: 100%; height: 80px;padding-bottom: 2px;font: 500 40px PingFangSC-Medium;color: #FFFFFF;background: url("../../../../assets/imgCity/header_bottom_line.png") center bottom/534px 2px no-repeat;}
}
</style>
